<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<title></title>
	</head>
	<body class="container-fluid">
		<div id="app">
			<!--
				v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素
				v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值
			-->
			<input type="text" name="username" v-model="username" /> {{username}}<br>
			
			<!--复选-->
			<input type="checkbox" id="check" v-model="flag" />
			<label for="check"> {{flag}}</label>
			<input type="checkbox" id="check2" v-model="word" v-bind:true-value="a" v-bind:false-value="b" />
			<label for="check2"> {{word}}</label>
			
			<!--对于多个复选框-->
			<div id='example-3'>
			  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
			  <label for="jack">Jack</label>
			  <input type="checkbox" id="john" value="John" v-model="checkedNames">
			  <label for="john">John</label>
			  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
			  <label for="mike">Mike</label>
			  <br>
			  <span>Checked names: {{ checkedNames }}</span>
			</div>
			
			<!--单选-->
			<div id="example-4">
			  <input type="radio" id="one" value="One" v-model="picked">
			  <label for="one">One</label>
			  <br>
			  <input type="radio" id="two" value="Two" v-model="picked">
			  <label for="two">Two</label>
			  <br>
			  <span>Picked: {{ picked }}</span>
			</div>
			
			<!--select-->
			<div id="example-5">
			  <select v-model="selected">
			    <option disabled value="">请选择</option>
			    <option>DOTA</option>
			    <option>LOL</option>
			    <option>DNF</option>
			  </select>
			  <span>Selected: {{ selected }}</span>
			</div>
			
			<!--修饰符-->
			<!--转变为在 change 事件中同步-->
			<input type="text" v-model.lazy="val1" placeholder="lazy" /> {{ 'val: ' + val1 }}<br>
			<!--自动将用户的输入值转为 Number 类型，这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型-->
			<input type="number" v-model.number="val2" placeholder="number" /> {{ 'val: ' + val2 }}<br>
			<!--自动过滤用户输入的首尾空格-->
			<input type="text" v-model.trim="val3" placeholder="trim" /> {{ 'val: ' + val3 }}<br>
			
		</div>


		
		<script src="js/vue.js" ></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					username: '',
					flag: true,
					checkedNames: [],
					picked: '',
					selected: '',
					word: '选择',
					a: '选中！',
					b: '未选中！',
					val1: '',
					val2: '',
					val3: ''
				}
			});
			
			
			
		</script>
	</body>
</html>
